<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于同时展示多个商品、分类、数量不确定的场景，并支持左右滑动的列表。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-scroll-list>
				<view class="fu-flex">
				  <block v-for="(item, index) in 14" :key="index">
				    <view class="fu-text-c fu-p-20">
				    	<fu-button width="50" height="50" color="repeating-linear-gradient(45deg, #31C9E8, #2DE8BD)" margin="10rpx 10rpx">
							<fu-icons name="vip-fill" size="30" color="#FFFFFF"></fu-icons>
						</fu-button>
				    </view>
				  </block>
				</view>
			</fu-scroll-list>
		</fu-section>
		
		<fu-section title="隐藏指示器" customClass="fu-m-t-20" type="line">
			<fu-scroll-list :indicator="false">
				<view class="fu-flex">
				  <block v-for="(item, index) in 14" :key="index">
				    <view class="fu-text-c fu-p-20">
				    	<fu-button width="50" height="50" color="linear-gradient(45deg, #31C9E8, #27A1BA, #98E4F3, #D6F4FA)" margin="10rpx 10rpx">
							<fu-icons name="vip-fill" size="30" color="#FFFFFF"></fu-icons>
						</fu-button>
				    </view>
				  </block>
				</view>
			</fu-scroll-list>
		</fu-section>
		
		<fu-section title="自定义指示器样式" customClass="fu-m-t-20" type="line">
			<fu-scroll-list :indicatorWidth="66" :indicatorBarWidth="30">
				<view class="fu-flex">
				  <block v-for="(item, index) in 14" :key="index">
				    <view class="fu-text-c fu-p-20">
				    	<fu-button width="50" height="50" color="repeating-linear-gradient(45deg, #00C3FF, #58FFF5)" margin="10rpx 10rpx">
							<fu-icons name="vip-fill" size="30" color="#FFFFFF"></fu-icons>
						</fu-button>
				    </view>
				  </block>
				</view>
			</fu-scroll-list>
		</fu-section>
		
		<fu-section title="多菜单扩展" customClass="fu-m-t-20" type="line">
			<fu-scroll-list>
				<view class="">
					<view class="fu-flex">
					  <block v-for="(item, index) in 14" :key="index">
					    <view class="fu-text-c fu-p-20">
					    	<fu-button width="50" height="50" color="repeating-linear-gradient(45deg, #31C9E8, #2DE8BD)" margin="10rpx 10rpx">
								<fu-icons name="vip-fill" size="30" color="#FFFFFF"></fu-icons>
							</fu-button>
							<view>VIP</view>
					    </view>
					  </block>
					</view>
					<view class="fu-flex">
					  <block v-for="(item, index) in 14" :key="index">
					    <view class="fu-text-c fu-p-20">
					    	<fu-button width="50" height="50" color="repeating-linear-gradient(45deg, #00C3FF, #58FFF5)" margin="10rpx 10rpx">
								<fu-icons name="vip-fill" size="30" color="#FFFFFF"></fu-icons>
							</fu-button>
							<view>VIP</view>
					    </view>
					  </block>
					</view>
				</view>
			</fu-scroll-list>
		</fu-section>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>